<template>
    <view class="big_box">
        <view class="top">
            <!-- 头部搜索框 -->
            <view class="z-nav">
                <view class="search-block">
                    <view class="search-ico-wapper">
                        <image src="../../static/icon/search@3x.png" class="search-icon"></image>
                    </view>
                    <input placeholder="搜索商品" maxlength="20" class="search-text" focus/>
                </view>
                <view class="search-font">
                    <text>搜索</text>
                </view>
            </view>
        </view>
        <!-- 搜索记录 -->
        <view class="seek_big">
            <!-- 顶部信息 -->
            <view class="seek_log">
                <text>搜索记录</text>
                <image src="../../static/icon/fc-delete@3x.png"></image>
            </view>
            <!-- 搜索记录信息 -->
            <view class="seek_message">
                <text>1</text>
                <text>苹果</text>
                <text>白心火龙果</text>
                <text>广西沃柑</text>
                <text>印尼山竹</text>
            </view>
        </view>
    </view>
</template>

<script>
</script>

<style lang="scss" scoped>
    .z-nav{
        display: flex;
        flex-direction:row; /* 水平轴上进行排列*/
        margin-top: 10rpx;

    }
    .search-block{
        display:flex;
        flex-direction:row;
        width: 540rpx;
        height: 70rpx;
        border-radius: 35rpx;
        margin: 0 25rpx;
        justify-content: center;
        background-color: #f2f2f2;

    }
    .search-icon{
        width: 60rpx;
        height: 60rpx;

    }
    .search-text{
        font-size:30rpx;
        width:180rpx;
        height: 60rpx;
        border-radius:0 20rpx 20rpx 0;
        color: #999999;
        margin-top: 5rpx;
        background-color: #f2f2f2;
    }
    .search-ico-wapper{
        border-radius: 20rpx 0 0 20rpx;
        background-color:#f2f2f2;
        display: flex;
        flex-direction:column;
        justify-content: center;
        padding: 0 10rpx;

    }
    .search-font{
        display: flex;
        justify-content: flex-start; /* 从左到右进行排列*/
        width: 130rpx;
        height: 70rpx;
        background-image: linear-gradient(90deg, #ffca4b 0%, #ff4200 100%),
        linear-gradient(#f2f2f2, #f2f2f2);
        background-blend-mode: normal, normal;
        border-radius: 35rpx;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 28rpx;
    }

    .seek_big{
        //顶部信息
        width: 100%;
        margin-top: 40rpx;
        .seek_log{
            display: flex;
            flex-direction:row; //在水平轴上进行排列
            justify-content: flex-flow;
            position: relative;
            text{
                display: flex;
                height: 24rpx;
                font-size: 24rpx;
                line-height: 29rpx;
                color: #191919;
                padding: 20rpx 0 0 20rpx;
                font-weight:bold;
            }
            image{
                width: 60rpx;
                height: 60rpx;
                background-color: #f2f2f2;
                position: absolute;
                right: 40rpx;
            }
        }

        //搜索记录信息
        .seek_message{
            display: flex;
            width: 100%;
            margin-top: 40rpx;
            flex-direction:row; //在水平轴上进行排列
            justify-content: flex-start; /* 从左到右进行排列*/
            flex-wrap: wrap; /* 必要时换行*/
            text{
                display: flex;
                width: 125rpx;
                height: 78rpx;
                line-height: 34rpx;
                background-color: #ffffff;
                border-radius: 35rpx;
                border: solid 2rpx #f2f2f2;
                align-items: center;
                justify-content: center;
                font-size: 24rpx;
                color: #999999;
                margin: 20rpx 0 0 25rpx;
            }
        }

    }
</style>
